<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="nav.css">
  <title>HB</title>
  <link rel="stylesheet">
  <style>
    @charset "UTF-8";

    body .shell-main-footer {
      width: 100%;
      position: relative;
      height: 100px;
      transform: translateY(100px);
      display: flex;
      justify-content: center;
      letter-spacing: 2px;
      align-items: center;
      text-align: center;
      font: 100 30px 'font';
      background-color: #a1e6ff;
    }

    body .shell-top {
      width: 100%;
      height: 100vh;
      background-image: linear-gradient(to bottom, rgb(24, 16, 61), rgb(31, 16, 25));
      position: absolute;
      transition: .2s;
      overflow: hidden;
    }

    body .shell-top video {
      width: 100%;
    }

    body .shell-top .word {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 700px;
      height: 220px;
      border: solid 10px rgba(255, 255, 255, 0.199);
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }

    body .shell-top .word h2 {
      font: 100 70px 'font';
      color: #fff;
      letter-spacing: 10px;
    }

    body .shell-main {
      width: 100%;
      height: auto;
      top: 100vh;
      position: relative;
      transition: .2s;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 100px;
    }

    body .shell-main::before {
      content: '';
      width: 250px;
      height: 50%;
      background-image: linear-gradient(to bottom, #a1e6ff, #a8ffe2, #a1e6ff);
      position: absolute;
      transform: translate(-145%, 0);
      z-index: -999;
      bottom: 0;
    }

    body .shell-main::after {
      content: '';
      width: 250px;
      height: 50%;
      background-image: linear-gradient(to bottom, #a1e6ff, #a8ffe2, #a1e6ff);
      position: absolute;
      transform: translate(145%);
      z-index: -999;
    }

    body .shell-main-lbt {
      position: relative;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 650px;
      margin-bottom: 150px;
      overflow: hidden;
      background-image: url("./images/keli0.jpg");
      background-color: #fff;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: 50%;
    }

    body .shell-main-lbt .images {
      width: 300%;
      height: 100%;
      display: flex;
      align-items: center;
      position: absolute;
      left: 0;
      transition: .2s;
    }

    body .shell-main-lbt .images .img {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    body .shell-main-lbt .images .img .shell-main-lbt-word {
      width: 600px;
      overflow-x: hidden;
      height: 200px;
      background: linear-gradient(to right bottom, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
      backdrop-filter: blur(0px);
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      text-align: center;
      transform: translateY(400px);
      transition: .5s;
    }

    body .shell-main-lbt .images .img .shell-main-lbt-word h2 {
      font: 400 32px 'font';
      transition: .6s;
      transition-delay: .4s;
      transform: translate(520px);
    }

    body .shell-main-lbt .images .img .shell-main-lbt-word span {
      color: #3a3a3a;
      transition: .6s;
      transition-delay: .4s;
      transform: translate(-620px);
    }

    body .shell-main-lbt .min-images {
      display: flex;
      justify-content: space-evenly;
      position: absolute;
      bottom: 20px;
      width: 40%;
      z-index: 999;
      right: 10%;
    }

    body .shell-main-lbt .button {
      width: 100%;
      position: absolute;
      display: flex;
      justify-content: space-between;
      user-select: none;
    }

    body .shell-main-lbt .button .button-left,
    body .shell-main-lbt .button .button-right {
      font-size: 50px;
      background-color: rgba(160, 193, 255, 0.7);
      padding: 0 20px;
      cursor: pointer;
      line-height: 500px;
    }

    body .shell-main-header {
      width: 90%;
      height: 700px;
      display: flex;
      justify-content: center;
      margin-bottom: 100px;
      overflow: hidden;
      align-items: center;
      position: relative;
      margin-bottom: 150px;
    }

    body .shell-main-header-left {
      width: 60%;
      height: 90%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      box-shadow: 0 0 15px rgba(95, 95, 95, 0.5);
      background-color: white;
      overflow: hidden;
    }

    body .shell-main-header-left::after {
      content: '';
      width: 200px;
      height: 15px;
      background-color: #66ccff;
      opacity: 0.8;
      position: absolute;
      top: 0;
      left: 0;
    }

    body .shell-main-header-left::before {
      content: '';
      width: 250px;
      height: 250px;
      border: 20px solid rgba(0, 255, 204, 0.3);
      position: absolute;
      bottom: -30px;
      left: -140px;
      border-radius: 10px;
      transform: rotate(30deg);
      animation: transform 4s infinite;
    }

    @keyframes transform {
      0% {
        transform: rotate(30deg) translate(0);
      }

      50% {
        transform: rotate(40deg) translate(10px);
      }

      100% {
        transform: rotate(30deg) translate(0px);
      }
    }

    body .shell-main-header-left-footer {
      position: relative;
      width: 80%;
      margin-top: 20px;
      transform: translateY(400px);
      opacity: 0;
      transition: .9s;
      transition-delay: .3s;
    }

    body .shell-main-header-left-footer p {
      position: absolute;
      display: block;
      right: 0;
    }

    body .shell-main-header-left-top {
      display: flex;
      position: relative;
      width: 85%;
      transform: translateY(400px);
      opacity: 0;
      transition: .8s;
    }

    body .shell-main-header-left-top h2 {
      font-size: 100px;
      transform: translateY(-20px);
    }

    body .shell-main-header-left-top span {
      -webkit-text-fill-color: rgba(0, 0, 0, 0.2);
      -webkit-text-stroke-color: #3aaf88;
      -webkit-text-stroke-width: 1px;
      margin-left: 20px;
      font: 600 40px '';
    }

    body .shell-main-header-left-bottom {
      width: 100%;
      height: auto;
      transform: translateY(400px);
      transition: .8s;
      transition-delay: .2s;
      font-size: 20px;
    }

    #container {
      width: 300px;
      height: 200px;
      border: black solid 1px;
      margin: 0 auto;
    }

    #container>div {
      width: 150px;
      height: 200px;
      float: left;
    }

    #mine {
      background-color: #66ccff;
    }

    #computer {
      background-color: #00ffcc;
    }

    #computerChoice>IMG {
      transform: scaleX(-1);
    }

    h1 {
      margin-top: 0;
      text-align: center;
      font-size: 20px;
    }

    #container>#result {
      margin-top: 10px;
      font-size: 25px;
      width: 200px;
      height: 200px;
      text-align: center;
    }

    body .shell-main-header-right {
      width: 40%;
      height: 95%;
      background-size: cover;
      background-image: url("./images/keli5.jpg ");
      border: 5px solid #000;
    }

    body .shell-main-content {
      display: flex;
      justify-content: center;
      width: 100%;
      height: auto;
      padding: 20px 0;
      margin-bottom: 100px;
      overflow: hidden;
    }

    body .shell-main-content-left {
      width: 60%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #252525;
      display: flex;
      justify-content: space-between;
      padding: 0 50px;
      position: relative;
      flex-wrap: wrap;
      align-items: center;
    }

    body .shell-main-content-left::before {
      content: '';
      width: 200px;
      height: 20px;
      background-color: #2e2e2e;
      position: absolute;
      bottom: -30px;
      right: 0;
    }

    body .shell-main-content-left h2 {
      font-size: 40px;
      color: #fff;
      letter-spacing: 10px;
    }

    body .shell-main-content-left-fans {
      width: 300px;
      height: 300px;
      transform: scale(0.7);
    }

    body .shell-main-content-left-fans ul {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
    }

    body .shell-main-content-left-fans ul li {
      width: 80px;
      height: 80px;
      background-color: #000;
      border-radius: 50%;
      overflow: hidden;
    }

    body .shell-main-content-left-fans ul li:hover img {
      transform: scale(1.2);
    }

    body .shell-main-content-left-fans ul li img {
      width: 100%;
      transition: .2s;
    }

    body .shell-main-content-left-fans ul li span {
      color: #fff;
      font-size: 40px;
      text-align: center;
      display: block;
      line-height: 80px;
    }

    body .shell-main-content-right {
      width: 300px;
      height: 100%;
      padding: 0 60px;
    }

    body .shell-main-content-right h2 {
      font-size: 40px;
    }

    body .shell-main-content-right span {
      display: block;
      margin: 20px 0;
    }

    body .shell-main-content-right img {
      width: 100%;
    }

    body .shell-main-bottom {
      display: flex;
      justify-content: center;
      width: 100%;
      height: 510px;
      flex-direction: column;
      margin: 200px;
    }

    body .shell-main-bottom h2 {
      font: 100 34px 'font';
      color: #48afa5;
      letter-spacing: 5px;
      margin-left: 100px;
    }

    body .shell-main-bottom h2 span {
      font-size: 80px;
      color: turquoise;
    }

    body .shell-main-bottom-bottom {
      width: 100%;
      height: auto;
      padding: 20px 0 100px 0;
      background: linear-gradient(to right bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.6));
      backdrop-filter: blur(30px);
      position: relative;
    }

    body .shell-main-bottom-bottom::before {
      content: '';
      width: 250px;
      height: 250px;
      border: 20px solid rgba(102, 204, 255, 1);
      position: absolute;
      border-radius: 10px;
      right: 100px;
      top: 100px;
      transform: rotate(30deg) translate(-50%, -50%);
      animation: transform 5.5s infinite;
      opacity: 0.8;
      z-index: -999;
    }

    @keyframes transform {
      0% {
        transform: rotate(30deg);
      }

      50% {
        transform: rotate(210deg);
      }

      100% {
        transform: rotate(30deg);
      }
    }

    body .shell-main-bottom-bottom ul {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-evenly;
      margin-top: 40px;
      flex-wrap: wrap;
    }

    body .shell-main-bottom-bottom ul li {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      border: 12px solid rgba(0, 0, 0, 0.2);
      display: flex;
      padding: 10px;
      flex-direction: column;
      transition: .3s;
      margin-bottom: 100px;
    }

    body .shell-main-bottom-bottom ul li span {
      font-size: 10px;
    }

    body .shell-main-bottom-bottom ul li:hover {
      padding: 2px;
      margin: 8px;
    }

    body .shell-main-bottom-bottom ul li:hover h2 {
      letter-spacing: 3px;
    }

    body .shell-main-bottom-bottom ul li img {
      width: 100%;
      border-radius: 50%;
    }

    body .shell-main-bottom-bottom ul li h2 {
      margin: 30px 0 10px 0;
      font-size: 24px;
      transition: .3s;
      color: black;
      text-align: center;
      letter-spacing: 0;
    }

    body .shell-main-bottom-bottom ul li span {
      color: #525252;
    }

    body .shell-main-image {
      width: 100%;
      display: flex;
      height: 900px;
      margin: 10px 0;
      position: relative;
      justify-content: center;
      align-items: center;
    }

    body .shell-main-image h2 {
      font-size: 30px;
      color: turquoise;
    }

    body .shell-main-image span {
      font-size: 20px;
    }

    body .shell-main-image p {
      font-size: 30px;
      writing-mode: lr-tb;
      font-size: 17px;
    }

    body .shell-main-image-left {
      position: absolute;
      left: 100px;
      top: 200px;
      width: 320px;
    }

    body .shell-main-image-right {
      position: absolute;
      right: 5px;
      top: 675px;
      width: 600px;
    }

    body .shell-main-image-auto {
      position: absolute;
      top: 420px;
      left: 190px;
      width: 10px;
    }

    body .shell-main-image-img {
      width: 100%;
      height: 100%;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    body .shell-main-image-img img {
      position: absolute;
    }

    body .shell-main-image-img img:nth-child(1) {
      width: 330px;
      height: 440px;
      transform: translate(-190px, 233px);
      z-index: 9;
    }

    body .shell-main-image-img img:nth-child(2) {
      width: 360px;
      height: 480px;
      z-index: 8;
      transform: translate(0px, -150px);
    }

    body .shell-main-image-img img:nth-child(3) {
      width: 450px;
      z-index: 7;
      height: 300px;
      transform: translate(120px, 120px);
    }

    @media (max-width:768px) {
      body .shell-main::after {
        transform: translate(0);
      }

      body .shell-main::before {
        transform: translate(0);
      }

      .shell-top {
        display: flex;
      }

      body .shell-main-nav ul {
        transform: scale(.7);
        right: -60px;
        top: 2px;
      }

      body .shell-main-lbt .button {
        height: 200px;
      }

      body .shell-main-lbt .button .button-left,
      body .shell-main-lbt .button .button-right {
        line-height: 200px;
      }

      body .shell-main-header {
        flex-wrap: wrap;
        height: 2000px;
      }

      body .shell-main-header-left {
        height: 70%;
        width: 100%;
      }

      body .shell-main-header-right {
        width: 100%;
        height: 30%;
      }

      body .shell-main-content {
        flex-wrap: wrap;
      }

      body .shell-main-content-left {
        width: 100%;
        margin-bottom: 30px;
        justify-content: center;
      }

      body .shell-main-content-right {
        width: 100%;
      }

      body .shell-main-bottom {
        margin: 200px;
      }

      body .shell-main-bottom-bottom ul li {
        width: 250px;
        height: 250px;
      }

      body .shell-main-image-img {
        transform: scale(.9);
      }

      body .shell-main-image-left {
        transform: scale(.4);
        left: 0;
      }

      body .shell-main-image-right,
      body .shell-main-image-left,
      body .shell-main-image-auto {
        display: none;
      }
    }

    @media (max-width:600px) {
      body .shell-main-bottom {
        margin: 600px 0;
      }

      body .shell-main-header {
        height: 1600px;
      }

      body .shell-main-content-left h2 {
        font-size: 30px;
      }

      body .shell-main-image-img {
        transform: scale(.5);
      }

      body .shell-main-image-img img:nth-child(3) {
        transform: translate(120px, 120px);
      }

      body .shell-main-nav .logo {
        display: none;
      }

      body .shell-main-nav ul {
        transform: scale(.6);
        right: -120px;
      }

      body .shell-top .word {
        width: 80%;
        height: 100px;
      }

      body .shell-top .word h2 {
        font-size: 30px;
      }

      body .shell-main-lbt .button .button-left,
      body .shell-main-lbt .button .button-right {
        width: 10px;
        font-size: 20px;
        opacity: .2;
      }

      body .shell-main-image {
        height: 500px;
      }

      body .shell-main-lbt {
        height: 300px;
      }
    }

    @media (min-width:1300px) {
      body .shell-main-bottom {
        margin: 0;
      }
    }
  </style>
</head>

<body>
  <div class="shell">
    <div class="shell-top">
      <div class="word">
        <h2>Welcome to</h2>
        <h2>教授的新家</h2>
      </div>
      <video src="./images/video.mp4" loop autoplay muted></video>
    </div>
    <div class="shell-main">
      <div class="shell-main-nav">
        <div class="logo">
          <img src="./images/keli6.jpg" alt="">
          <span>keli</span>
        </div>
        <ul>
          <li><a href="./index.html">主页<span>|</span></a></li>
          <li><a href="./tuku.html">图库<span>|</span></a></li>
          <li><a href="./heci.html">贺词<span>|</span></a></li>
          <li><a href="./banben.html">版本<span>|</span></a></li>
          <li><a href="./Login.html">登录</a></li>
          <div class="nav-box"></div>
        </ul>
      </div>
      <div class="shell-main-lbt">
        <ul class="images">
          <li class="img">
            <div class="shell-main-lbt-word">
              <h2>可莉的冒险</h2><br />
              <span>可莉在冒险的途中遇到了好多好多的小怪，快来帮可莉解决他们吧</span>
            </div>
          </li>
          <li class="img">
            <div class="shell-main-lbt-word">
              <h2>游戏说明</h2><br />
              <span>每一个怪都有他们的特性，根据他们的特性来击败他们吧</span>
            </div>
          </li>
          <li class="img">
            <div class="shell-main-lbt-word">
              <h2>快来冒险吧</h2><br />
              <span>蹦蹦炸弹！！！</span>
            </div>
          </li>
        </ul>
        <ul class="min-images">
          <li class="min"></li>
          <li class="min"></li>
          <li class="min"></li>
        </ul>
        <div class="button">
          <div class="button-left">
          </div>
          <div class="button-right">></div>
        </div>
      </div>
      <div class="shell-main-header">
        <div class="shell-main-header-left">
          <div class="shell-main-header-left-top">
            <h2>这</h2>
            <span>是一个可莉的世界<br />是一个人面授心的游戏</span>
          </div>
          <div class="shell-main-header-left-bottom">
            <div id="container">
              <div id="mine">
                <h1>可莉出招</h1>
                <div id="myChoice">
                  <img src="images/animation.gif" style="width:130px;" alt="" />
                </div>
                <input type="button" value="石头" onclick="rock()" ; style="width:40px; height:25px; font-size:13px;" />
                <input type="button" value="剪刀" onclick="scissors()" ;
                  style="width:40px; height:25px; font-size:13px;" />
                <input type="button" value="布" onclick="paper();" style="width:40px; height:25px; font-size:13px;" />
              </div>
              <div id="computer">
                <h1 id="computerName">电脑大锤</h1>
                <div id="computerChoice">
                  <img src="images/animation.gif" style="width:130px" alt="" />
                </div>
              </div>
              <div id="result"></div>
            </div>
          </div>
          <div class="shell-main-header-left-footer">
            <p>------01212050</p>
          </div>
        </div>
        <div class="shell-main-header-right"></div>
      </div>
      <div class="shell-main-content">
        <div class="shell-main-content-left">
          <h2>猜猜<br />这是谁？</h2>
          <div class="shell-main-content-left-fans">
            <ul>
              <li><img src="./images/jiao2.jpg" alt=""></li>
              <li><img src="./images/jiao2.jpg" alt=""></li>
              <li><img src="./images/jiao2.jpg" alt=""></li>
              <li><img src="./images/jiao2.jpg" alt=""></li>
              <li><img src="./images/jiao1.jpg" alt=""></li>
              <li><img src="./images/jiao2.jpg" alt=""></li>
              <li><img src="./images/jiao2.jpg" alt=""></li>
              <li><img src="./images/jiao2.jpg" alt=""></li>
              <li><span>••• </span></li>
            </ul>
          </div>
        </div>
        <audio id="bong">
          <source src="wav/bong.wav" type="audio/mpeg">
        </audio>
        <audio id="zao">
          <source src="wav/zao.wav" type="audio/mpeg">
        </audio>
        <audio id="wan">
          <source src="wav/wan.wav" type="audio/mpeg">
        </audio>
        <audio id="js">
          <source src="wav/可莉祝教授18岁生日快乐.wav" type="audio/mpeg">
        </audio>
        <div class="shell-main-content-right">
          <h2>Blessing for 授</h2>
          <span>教授18岁生日快乐！！</span>
          <img src="./images/keli666.jpg" alt="">
        </div>
      </div>
      <div class="shell-main-bottom">
        <h2><span>忆</span>往夕:</h2>
        <div class="shell-main-bottom-bottom">
          <ul>
            <li>
              <img src="./images/jiao3.jpg" alt="">
              <h2>网课"学习":</h2>
              <span>奋斗.jpg（手动狗头）</span>
            </li>
            <li>
              <img src="./images/jiao0.jpg" alt="">
              <h2>和教授一起吃饭:</h2>
              <span>教授一定很开心吧！（笑）</span>
            </li>
            <li>
              <img src="./images/jiao08.jpg" alt="">
              <h2>永远的家:</h2>
              <span>距2018.08.27已经1890天了，我们一起见证了太多太多<br />HB to 01212008</span>
            </li>
            <li>
              <img src="./images/keli6.jpg" alt="">
              <h2>教授的女儿:</h2>
              <span>可莉，前来报道！</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="shell-main-image">
        <div class="shell-main-image-img">
          <img src="./images/keli3.jpg" alt="">
          <img src="./images/keli5.jpg" alt="">
          <img src="./images/keli0.jpg" alt="">
        </div>
      </div>
      <div class="mainbgm">
        <audio id="bgm" autoplay controls>
          <source src="wav/audio.wav" type="audio/mpeg">
        </audio>
      </div>
      <div class="shell-main-footer">
        <span>版权所有:一只人兽无害的2050</span>
      </div>
    </div>
  </div>
</body>
<!-- 引入jquery -->
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
<script src="main.js"></script>
<script>

  document.getElementById("bgm").volume = 0.4

  window.addEventListener('scroll', function () {

    let top = window.scrollY

    if (top != 0) {

      $('.shell-top').css('top', '-100vh')

      $('.shell-main').css('top', '0')

      $('.shell-main-lbt-word').css('transform', 'translateY(0px)')

      $('.shell-main-lbt-word').css('backdrop-filter', 'blur(5px)')

      $('.shell-main-lbt-word h2').css('transform', 'translate(0px)')

      $('.shell-main-lbt-word span').css('transform', 'translate(0px)')



    } else {

      $('.shell-top').css('top', '0px')

      $('.shell-main').css('top', '100vh')

      $('.shell-main-lbt-word').css('transform', 'translateY(400px)')

      $('.shell-main-lbt-word').css('backdrop-filter', 'blur(0px)')

      $('.shell-main-lbt-word h2').css('transform', 'translate(520px)')

      $('.shell-main-lbt-word span').css('transform', 'translate(-620px)')

    }

    if (top > 369) {

      $('.shell-main-header-left-top').css('opacity', '1')

      $('.shell-main-header-left-top').css('transform', 'translateY(0px)')

      $('.shell-main-header-left-bottom').css('opacity', '1')

      $('.shell-main-header-left-bottom').css('transform', 'translateY(0px)')

      $('.shell-main-header-left-footer').css('opacity', '1')

      $('.shell-main-header-left-footer').css('transform', 'translateY(0px)')

    } else {

      $('.shell-main-header-left-top').css('opacity', '0')

      $('.shell-main-header-left-top').css('transform', 'translateY(400px)')

      $('.shell-main-header-left-bottom').css('opacity', '0')

      $('.shell-main-header-left-bottom').css('transform', 'translateY(400px)')

      $('.shell-main-header-left-footer').css('opacity', '0')

      $('.shell-main-header-left-footer').css('transform', 'translateY(400px)')

    }

  })

  let left = document.querySelector(".button-left")

  let right = document.querySelector(".button-right")

  let min = document.querySelectorAll(".min")

  let images = document.querySelector(".images")

  let index = 0

  let time

  function position() {

    images.style.left = (index * -100) + "%"

  }

  function add() {

    if (index >= min.length - 1) {

      index = 0

    } else {

      index++

    }

  }

  function desc() {

    if (index < 1) {

      index = min.length - 1

    } else {

      index--

    }

  }



  function timer() {

    time = setInterval(() => {

      index++

      desc()

      add()

      position()

    }, 23333)

  }



  left.addEventListener("click", () => {

    desc()

    position()

    clearInterval(time)

    timer()

  })

  // 右边的按钮和左边也是差不多

  right.addEventListener("click", () => {

    add()

    position()

    clearInterval(time)

    timer()

  })



  for (let i = 0; i < min.length; i++) {

    min[i].addEventListener("click", () => {

      index = i

      position()

      clearInterval(time)

      timer()

    })

  }



  timer()

</script>

</html>